<template>
	<view class="out" :style="{height: navigationHeight + 'rpx'}">
		<view v-for="(item, index) in navigationList" :key="index" class="item" @click="changeNavigation(index)">
			<!--  图片  -->
			<view class="icon_out">
				<image class="icon" :src="navigationIndex == index ? item.iconPathActive : item.iconPath">
				</image>
			</view>
			<!--  文本  -->
			<view :class="navigationIndex == index ? 'text_active' : 'text'"
				:style="{color: navigationIndex == index ? mainColor : 'rgb(138, 138, 138)'}">{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "bottom-navigation",
		props: {
			navigationIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 导航栏高度
				navigationHeight: app.globalData.navigationHeight,
				// 统一背景颜色
				unifyBgColor: app.globalData.unifyBgColor,
				// 主色调
				mainColor: app.globalData.mainColor,
				// 导航集合
				navigationList: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/image/component/bottom_navigation/home.png",
						iconPathActive: '/static/image/component/bottom_navigation/home_select.png',
						text: "首页",
						index: 0
					},
					{
						pagePath: "/pages/foldLine/foldLine",
						iconPath: "/static/image/component/bottom_navigation/fold_line.png",
						iconPathActive: '/static/image/component/bottom_navigation/fold_line_select.png',
						text: "趋势",
						index: 1
					},
					{
						pagePath: "/pages/bmi/bmi",
						iconPath: "/static/image/component/bottom_navigation/bmi.png",
						iconPathActive: '/static/image/component/bottom_navigation/bmi_select.png',
						text: "BMI",
						index: 2
					},
					{
						pagePath: "/pages/mime/mime",
						iconPath: "/static/image/component/bottom_navigation/mime.png",
						iconPathActive: '/static/image/component/bottom_navigation/mime_select.png',
						text: "我的",
						index: 3
					}
				]
			};
		},
		methods: {
			/**
			 * 修改选中的导航
			 */
			changeNavigation(index) {
				console.log('index', index)
				// 如果点击的下标和原来的下标一样，就返回
				console.log('this.navigationIndex : ', this.navigationIndex)
				if (index === this.navigationIndex) {
					console.log('1111')
					return
				}
				console.log('222')
				// 点击的下标对应的项
				let navigationItem = this.navigationList[index]
				console.log('333')
				// 跳转对应的页面
				uni.reLaunch({
					url: navigationItem.pagePath,
					success: (res) => {
						console.log('success : res : ', res)
					},
					fail: (res) => {
						console.log('fail : res : ', res)
					},
					complete: (res) => {
						console.log('complete : res : ', res)
					}
				})
			}
		}
	}
</script>

<style>
	/*  外部  */
	.out {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 70rpx;
		flex-direction: row;
		background-color: rgb(220, 220, 200);
		color: rgb(228, 228, 228);
		z-index: 5;
		padding-top: 5rpx;
	}

	/*  单项  */
	.item {
		padding-top: 10rpx;
		flex-grow: 1;
		height: 100%;
	}

	/*  文本  */
	.text {
		text-align: center;
		/* font-size: 24rpx; */
		font-size: small;
	}

	.text_active {
		text-align: center;
		/* font-size: 24rpx; */
		color: rgb(47, 155, 222);
		font-size: small;
	}

	/*  图标外部  */
	.icon_out {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: center;
		/*水平居中*/
	}

	/*  图标  */
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>
